import type {Ref} from 'vue'
import {nextTick, ref} from 'vue'

type ScrollElement = HTMLDivElement | null

interface ScrollReturn {
    scrollRef: Ref<ScrollElement>
    scrollToBottom: () => Promise<void>
    scrollToTop: () => Promise<void>
    scrollToBottomIfAtBottom: () => Promise<void>
}

export function useScroll(): ScrollReturn {
    const scrollRef = ref<ScrollElement>(null)

    const scrollToBottom = async () => {
        if (scrollRef.value){
            scrollRef.value.scrollTo({
                top: scrollRef.value.scrollHeight,
                //behavior: 'smooth' // 平滑滚动
            });
        }
        //    scrollRef.value.scrollTop = scrollRef.value.scrollHeight

    }

    const scrollToTop = async () => {
        await nextTick()
        if (scrollRef.value){
            scrollRef.value.scrollTo({
                top: 0,
                behavior: 'smooth' // 平滑滚动
            });
        }
          //  scrollRef.value.scrollTop = 0

    }

    const scrollToBottomIfAtBottom = async () => {
        await nextTick()
        if (scrollRef.value) {
            const threshold = 100 // Threshold that represents the distance to the bottom of the scroll bar
            const distanceToBottom = scrollRef.value.scrollHeight - scrollRef.value.scrollTop - scrollRef.value.clientHeight
            if (distanceToBottom <= threshold)
                scrollRef.value.scrollTop = scrollRef.value.scrollHeight
        }
    }

    return {
        scrollRef,
        scrollToBottom,
        scrollToTop,
        scrollToBottomIfAtBottom,
    }
}
